
//- This Source Code Form is subject to the terms of the Mozilla Public
//- License, v. 2.0. If a copy of the MPL was not distributed with this
//- file, You can obtain one at http://mozilla.org/MPL/2.0/.
//-
//- Copyright (c) 2021-present Kaleidos Ventures SL

section.notifications-list
    div(ng-if="vm.loading")
         div.spin
            img(
                src="#{v}/svg/spinner-circle.svg"
                alt="Loading..."
            )
    div(ng-if="!vm.loading" )
        .empty(ng-if="vm.notificationsList.size == 0 && !vm.onlyUnread")
            span {{ 'EVENTS.NO_EVENTS_YET' | translate }}
        div(
            ng-if="vm.notificationsList.size > 0"
            infinite-scroll="vm.loadNotifications()"
            infinite-scroll-disabled="vm.scrollDisabled"
            ng-attr-infinite-scroll-container="vm.infiniteScrollContainer"
            ng-attr-infinite-scroll-distance="vm.infiniteScrollDistance"
        )
            .entry(
                tg-repeat="notification in vm.notificationsList track by $index"
                ng-class="{'new': !notification.get('read')}"
            )
                .entry-avatar
                    // profile image with url
                    .profile-picture(ng-if="notification.getIn(['data', 'user', 'is_profile_visible'])")
                        a(tg-nav="user-profile:username=notification.getIn(['data', 'user', 'username'])", title="{{::notification.getIn(['data', 'user', 'name']) }}")
                            img(
                                tg-avatar="notification.getIn(['data', 'user'])"
                                alt="{{::notification.getIn(['data', 'user', 'name'])}}"
                            )
                    // profile image without url
                    .profile-picture(ng-if="!notification.getIn(['data', 'user', 'is_profile_visible'])")
                        img(
                            tg-avatar="notification.getIn(['data', 'user'])"
                            alt="{{::notification.getIn(['data', 'user', 'name'])}}"
                        )
                .entry-content
                    p(tg-compile-html="notification.get('title_html')")
                    .entry-extra-data
                        a.entry-project(
                            href=""
                            ng-click="vm.setAsRead(notification, notification.get('projectUrl'))"
                        ) {{::notification.getIn(['data', 'project', 'name'])}}
                        .entry-date {{::notification.get('created') | momentFromNow}}
